<template>
	<view id="overall">
		<button open-type="chooseAvatar" @chooseavatar="onChooseavatar" class="avatar" :style="{backgroundImage:`url(${userInfor.avatarUrl})`}">
			<!-- <image :src="userInfor.avatarUrl"></image> -->
		</button>
		<view id="item">
			<view class="item">昵称:</view>
			<input type="nickname" @blur="bindblur" @input="bindinput" :value="userInfor.nickName"
				placeholder="请输入你要修改的昵称" />
		</view>
		<view id="item">
			<view class="item">电话号码:</view>
			<input type="text" v-model="userInfor.phone" placeholder="请输入你要修改的电话号码" />
		</view>

		<view class="save_out">
			<button @click="changeUesrInfo()">保存</button>
		</view>
	</view>
</template>

<script>
	import user from "@/api/user.js"
	import {
		mapMutations
	} from 'vuex'
	import {
		reactive
	} from 'vue'
	export default {
		data() {
			return {
				userInfor: {
					id: '',
					phone: '',
					sex: '',
					avatarUrl: '',
					nickName: ''
				},
			}
		},
		methods: {
			bindblur(e) {
				this.userInfor.nickName = e.detail.value; // 获取微信昵称
			},
			bindinput(e) {
				this.userInfor.nickName = e.detail.value; // 获取微信昵称
			},
			onChooseavatar(e) {
				let self = this;
				let {
					avatarUrl
				} = e.detail;
				this.userInfor.avatarUrl = avatarUrl
			},
			//保存用户
				changeUesrInfo(){
					console.log(this.userInfor)
					user.changUserInfor(this.userInfor.nickName,this.userInfor.phone).then(res=>{
						const that = this
						console.log(res)
						uni.setStorageSync("wximg",that.userInfor.avatarUrl)
						uni.navigateBack()
					})
				}

		},
		//每次进入都发生一次事件
		onShow() {
			const wximg = uni.getStorageSync("wximg")
			if(wximg != 0){
				this.userInfor.avatarUrl = wximg
			}
		},
	}
</script>

<style>
	#overall {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 30rpx;
	}

	#overall image {
		margin: 50rpx;
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
	}

	.avatar {
		margin: 50rpx;
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		background-size: cover;
	}
	#item {
		width: 100%;
		height: 50rpx;
		margin-top: 30rpx;
		display: flex;
	}

	.item {
		width: 30%;
		line-height: 50rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	#item input {
		border: 1rpx #ff9224 solid;
		border-radius: 15rpx;
		padding-left: 20rpx;
		width: 65%;
		height: 50rpx;
		font-size: 25rpx;
		background-color: antiquewhite;
	}

	/* 性别 */
	.sex_wapper {
		display: flex;
		height: 50rpx;
		border-radius: 15rpx;
		overflow: hidden;
		border: 1rpx #ff9224 solid;
	}

	.sex {
		background-color: #fff;
		color: #000;
		font-size: 25rpx;
		line-height: 50rpx;
		padding: 0 15rpx;
		font-weight: bold;
	}

	.sex_btn {
		background-color: #ff9224;
		color: #fff;
	}

	/* 保存  退出登录 */
	.save_out {
		width: 100%;
		margin-top: 100rpx;
		display: flex;
	}

	.save_out button {
		width: 180rpx;
		height: 55rpx;
		line-height: 55rpx;
		background-color: #ff9224;
		color: #fff;
		font-size: 25rpx;
		font-weight: bold;
	}
</style>